<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        编号:<input type="text" v-model ='newpig.id' ref='tp'>
        品牌名称:<input type="text" v-model ='newpig.name' ref='setcolor'> 
        <input type="button" value="添加" @click='add'>

    <div class="add">
        品牌名称:<input type="text" placeholder="请输入搜索条件" ref='setwidth' v-model='screen'>
    </div>

    <div>
        <table class="tb">
            <tr>
                <th>编号</th>
                <th>品牌名称</th>
                <th>创立时间</th>
                <th>操作</th>
            </tr>
            <tr v-for ='(value,index) in getscreen ' :key='index'>
                <td>{{value.id}}</td>
                <td>{{value.name}}</td>
                <td>{{value.time | timeformat('/')}}</td>
                <td><a href="#" @click.prevent='del(value,index)'>删除</a></td>
            </tr>
            <tr>
                <td colspan="4" v-show ='pig.length == 0'>没有品牌数据</td>
            </tr>
            <!-- 动态生成内容tr -->
        </table>
    </div>
    </div>
    <script>
        // 案例第一步
        // 1，实现数据的展示 模拟数据 循环生成数据结构
        // 2,实现数据的新增功能
        // 3,实现数组的删除功能
        // 4，实现输入框自动获取光标 使用ref对要操作的元素进行标识

        // 定义时间格式化过滤器
        Vue.filter('timeformat',(time,sep)=>{
            console.log(time,sep)
            // console.log(new Date(time))
            time = new Date(time)
            let year = time.getFullYear()
            let month = time.getMonth()+1
            let day = time.getDate()
            let hours = time.getHours()
            let minute = time.getMinutes()
            let second = time.getSeconds()
            return year+sep+month+sep+day+' '+hours+':'+minute+':'+second
        })


        var vm = new Vue({
            el: '#app',

            data: {
                screen : '',
                newpig : {
                    id : '',
                    name : '',
                    time : new Date(),
                },
                pig : [
                    {
                        id : 1,
                        name : '佩奇',
                        time : new Date(),

                    },
                    {
                        id : 2,
                        name : '乔治',
                        time : new Date(),

                    },
                    {
                        id : 3,
                        name : '苏西',
                        time : new Date(),

                    },
                    {
                        id : 4,
                        name : '波利',
                        time : new Date(),

                    }
                ]
            },
            computed : {
                getscreen(){
                    let temp = [];
                    for(let i=0;i<this.pig.length;i++){
                        // console.log(this.pig[i])
                        if(this.pig[i].name.indexOf(this.screen) != -1){
                            temp.push(this.pig[i])
                        }
                    }
                    return temp;
                },
            },
           
           mounted(){
            //    console.log(this.$refs.tp)
            this.$refs.tp.focus();
            this.$refs.setcolor.style.color='red';
            this.$refs.setwidth.style.width='400px';

           },

            methods : {
                add(){
                    // console.log(this.pig);
                    // console.log(this.newpig)
                    this.pig.push({...this.newpig})
                },
                del(value,index){
                    // console.log(value)
                    // console.log(index)
                    this.pig.splice(index,1)
                }

            }
        })
    </script>
</body>

</html>